<template>
    <div class="user-wrapper">
        <div class="content-box">
            <notice-icon class="action"/>
            <a-dropdown>
        <span class="action ant-dropdown-link user-dropdown-menu">
          <a-avatar v-if="avatar()" class="avatar" size="small" :src="avatar()"/>
          <a-avatar v-else size="small" icon="user" />
          <span class="userName">{{nickname()}}</span>
        </span>
                <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
                    <a-menu-item key="0">
                        <router-link :to="{ name: 'account' }">
                            <a-icon type="smile"/>
                            <span>个人中心</span>
                        </router-link>
                    </a-menu-item>
                    <a-menu-divider/>
                    <a-menu-item key="1">
                        <a href="javascript:;" @click="handleLogout">
                            <a-icon type="logout"/>
                            <span>退出登录</span>
                        </a>
                    </a-menu-item>
                </a-menu>
            </a-dropdown>
        </div>
    </div>
</template>

<script>
    import NoticeIcon from '@/components/NoticeIcon'
    import {mapActions, mapGetters} from 'vuex'

    export default {
        name: 'UserMenu',
        components: {
            NoticeIcon
        },
        data() {
            return {
                user:''
            }
        },
        created() {
            this.GetInfo('').then((res) => {
                this.user = res;
            })
        },
        methods: {
            ...mapActions(['Logout', 'GetInfo']),
            ...mapGetters(['nickname', 'avatar']),
            handleLogout() {
                const that = this

                this.$confirm({
                    title: '提示',
                    content: '真的要注销登录吗 ?',
                    onOk() {
                        return that.Logout({}).then(() => {
                            window.location.reload()
                        }).catch(err => {
                            that.$message.error({
                                title: '错误',
                                description: err.message
                            })
                        })
                    },
                    onCancel() {
                    }
                })
            }
        }
    }
</script>
<style>
    .userName{
        margin-left: 5px ;
    }
</style>
